<template>
    <div v-show="show">
        
        <h1>v-show</h1>
    </div>
    
    <button @click="togg">{{show?'隐藏':'显示'}}</button>
    <div v-for="(item) in clist" :key="item.id">
        <p>
            索引:{{ item.id }} 姓名:{{ item.name }} 年龄:{{ item.age }}
        </p>
    </div>
    <div>
        <h2>
            {{  title1}}
        </h2>
    </div>
    <div>
        <h2>
            {{  title}}
        </h2>
    </div>
    </template>
    <script lang="ts" setup>
    import {ref} from 'vue';
    const show=ref(true);
    const togg=()=>{
        show.value=!show.value;
    }
    const clist=[{
        id:"0",
        name:"张三",
        age:"18",
    },
    {
        id:"1",
        name:"李四",
        age:"19",
    },
    {
        id:"2",
        name:"王五",
        age:"20",
    },
    ]
    const title1='<h1>双向数据绑定演示</h1>'
    const title='双向数据绑定演示'
    </script>